<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>商品搜索列表</title>
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/goodlist.css"/>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../plugins/jquery/jquery-3.4.1.js"></script>
</head>
<body>

顶部导航栏



<div class="container" style="margin-top: 30px;">

    <!-- 搜索框 -->
    <div class="row">
        <div class="col-md-3">
            <div class="log">
                <img src="../images/360kad.jpg" alt="图片加载失败"/>
            </div>
        </div>
        <div class="col-md-6" style="padding: 0;margin-top: 15px">
            <form class="bs-example bs-example-form" role="form">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="请输入商品名称">
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="button">搜索</button>
                        </span>
                </div>
            </form>
        </div>
    </div>


    <!-- 商品类别 -->
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8" style="padding: 0;">
            <section class="screen">
                <ul>
                    <li>
                        <span class="firstterm ">品类:</span>
                        <div class="otherterm">
                            <div class="ra">
                                <input type="radio" name="type" class="ra" checked value="" onclick="f()">
                                <span>不限</span>
                            </div>
                            <div class="ra">
                                <input type="radio" name="type" class="ra" value="1" onclick="f()">
                                <span>药品</span>
                            </div>
                            <div class="ra">
                                <input type="radio" name="type" class="ra" value="2" onclick="f()">
                                <span>非药品</span>
                            </div>
                        </div>
                    </li>
                    <div id="type">

                    </div>

                    <li>
                        <span class="firstterm ">价格:</span>
                        <div class="otherterm">
                            <div class="ra">
                                <input class="price" type="text" name="lowprice"> &nbsp;-&nbsp;
                                <input class="price" type="text" name="upprice">元
                            </div>
                            <div class="ra">
                                <input type="button" class="btn-primary" value="搜索">
                            </div>

                        </div>
                    </li>
                </ul>
            </section>
        </div>
    </div>

    <script>
        function f() {
            var val = $('input:radio[name="type"]:checked').val()
            if(val == 1){
                var html = '<li>\n' +
                    '                        <span class="firstterm ">分类:</span>\n' +
                    '                        <div class="otherterm">\n' +
                    '                            <div class="ra">\n' +
                    '                                <input type="radio" name="used" checked value="">\n' +
                    '                                <span>不限</span>\n' +
                    '                            </div>\n' +
                    '                            <div class="ra">\n' +
                    '                                <input type="radio" name="used" value="3">\n' +
                    '                                <span>感冒发烧</span>\n' +
                    '                            </div>\n' +
                    '                            <div class="ra">\n' +
                    '                                <input type="radio" name="used" value="4">\n' +
                    '                                <span>呼吸系统</span>\n' +
                    '                            </div>\n' +
                    '                            <div class="ra">\n' +
                    '                                <input type="radio" name="used" value="5">\n' +
                    '                                <span>消化系统</span>\n' +
                    '                            </div>\n' +
                    '                            <div class="ra">\n' +
                    '                                <input type="radio" name="used" value="6">\n' +
                    '                                <span>眼耳口鼻</span>\n' +
                    '                            </div>\n' +
                    '                            <div class="ra">\n' +
                    '                                <input type="radio" name="used" value="7">\n' +
                    '                                <span>外用常备</span>\n' +
                    '                            </div>\n' +
                    '                        </div>\n' +
                    '                    </li>'
                $('#type').html(html)
            } else if (val == 2) {
                var html = '<li>\n' +
                    '                            <span class="firstterm ">分类:</span>\n' +
                    '                            <div class="otherterm">\n' +
                    '                                <div class="ra">\n' +
                    '                                    <input type="radio" name="1" checked value="">\n' +
                    '                                    <span>不限</span>\n' +
                    '                                </div>\n' +
                    '                                <div class="ra">\n' +
                    '                                    <input type="radio" name="1" value="8">\n' +
                    '                                    <span>医用口罩</span>\n' +
                    '                                </div>\n' +
                    '                                <div class="ra">\n' +
                    '                                    <input type="radio" name="1" value="9">\n' +
                    '                                    <span>体温计</span>\n' +
                    '                                </div>\n' +
                    '                                <div class="ra">\n' +
                    '                                    <input type="radio" name="1" value="10">\n' +
                    '                                    <span>消毒液</span>\n' +
                    '                                </div>\n' +
                    '                                <div class="ra">\n' +
                    '                                    <input type="radio" name="1" value="11">\n' +
                    '                                    <span>洗手液</span>\n' +
                    '                                </div>\n' +
                    '                            </div>\n' +
                    '                        </li>'
                $('#type').html(html)
            } else if (val == ''){
                $('#type').html('')
            }
        }
    </script>

    <!-- 商品列表-->
    <div class="row" id="goods">
        <section class="goodslist" >
            <ul id="goodShow">
                <li class="col-sm-3">
                    <div class="good">
                        <a href="#">
                            <div class="img">
                                <img src="../images/商品图.jpg" alt="图片加载失败">
                            </div>
                            <p style="color: black;font-size: 18px">商品名称</p>
                        </a>
                        <p style="color: black;overflow: hidden;height: 20px">商品简介</p>
                        <p style="color: red">价格</p>

                    </div>
                </li>

                <li class="col-sm-3">
                    <div class="good">
                        <a href="#">
                            <div class="img">
                                <img src="../images/商品图.jpg" alt="图片加载失败">
                            </div>
                            <p style="color: black">商品名称</p>
                        </a>
                        <p style="color: red">价格</p>
                    </div>
                </li>
                <li class="col-sm-3">
                    <div class="good">
                        <a href="#">
                            <div class="img">
                                <img src="../images/商品图.jpg" alt="图片加载失败">
                            </div>
                            <p style="color: black">商品名称</p>
                        </a>
                        <p style="color: red">价格</p>
                    </div>
                </li>
                <li class="col-sm-3">
                    <div class="good">
                        <a href="#">
                            <div class="img">
                                <img src="../images/商品图.jpg" alt="图片加载失败">
                            </div>
                            <p style="color: black">商品名称</p>
                        </a>
                        <p style="color: red">价格</p>
                    </div>
                </li>
                <li class="col-sm-3">
                    <div class="good">
                        <a href="#">
                            <div class="img">
                                <img src="../images/商品图.jpg" alt="图片加载失败">
                            </div>
                            <p style="color: black">商品名称</p>
                        </a>
                        <p style="color: red">价格</p>
                    </div>
                </li>
                <li class="col-sm-3">
                    <div class="good">
                        <a href="#">
                            <div class="img">
                                <img src="../images/商品图.jpg" alt="图片加载失败">
                            </div>
                            <p style="color: black">商品名称</p>
                        </a>
                        <p style="color: red">价格</p>
                    </div>
                </li>
            </ul>
        </section>
        <div class="col-md-12">&nbsp;</div>
    </div>


    <div style="text-align: center" id="page">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li class="disabled">
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>

</div>

底部导航栏



</body>
</html>